<template>
  <div>
    <el-card>
      <!--卡片头部-->
      <div slot="header">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
          <el-form-item label="id:">
            <el-input  v-model="dataForm.key" placeholder="秒杀id或商品id" clearable></el-input>
          </el-form-item>
          <el-form-item label="商品名称:">
            <el-input  v-model="dataForm.productName" placeholder="商品名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="场次:" prop="sessionId">
            <el-select v-model="dataForm.sessionId" placeholder="请选择">
              <el-option
                v-for="item in sessions"
                  :key="item.id"
                  :label="item.startTime+'--'+item.endTime"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataList()">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table
            :data="dataList"
            border
            v-loading="dataListLoading"
            style="width: 100%;">
          <el-table-column
              prop="id"
              header-align="center"
              align="center"
              label="秒杀id">
          </el-table-column>
          <el-table-column
              prop="productName"
              header-align="center"
              align="center"
              label="商品名称">
          </el-table-column>
          <el-table-column
              prop="seckillPrice"
              header-align="center"
              align="center"
              label="秒杀价格">
          </el-table-column>
          <el-table-column
              prop="seckillLimit"
              header-align="center"
              align="center"
              label="最大购买数量">
          </el-table-column>
          <el-table-column
              prop="seckillCount"
              header-align="center"
              align="center"
              label="秒杀商品数量">
          </el-table-column>
          <el-table-column
              fixed="right"
              header-align="center"
              align="center"
              width="150"
              label="操作">
            <template slot-scope="scope">
              <el-button v-if="scope.row.buyStatus===1" type="primary" size="small" @click="createOrderHandle(scope.row.id)">购买</el-button>
              <p v-else-if="scope.row.buyStatus===0">场次未至或场次已过</p>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <!-- 弹窗, 下单 -->
        <create-order v-if="createOrderVisible" ref="CreateOrder" @refreshDataList="getDataList"></create-order>
      </div>
    </el-card>
  </div>
</template>

<script>
import CreateOrder from './seckill-create-order'
import request from "@/utils/request";

export default {
  data() {
    return {
      sessions: [
        {
          id:0,
          startTime:'',
          endTime:''
        }
      ],
      dataForm: {
        key: '',
        productName:'',
        sessionId: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      createOrderVisible: false
    }
  },
  components: {
    CreateOrder
  },
  created() {
    this.getDataList(),
    this.getSession()
  },
  methods: {
    getSession() {
        request.get('/seckill/session/user/getSessions').then((response) => {
          if (response.data && response.data.code === 200) {
            this.sessions = response.data.sessions
          } else {
            this.sessions = []
          }
        }).catch((error) => {
          console.error(error)
        })
      },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      request.get('/seckill/relation/user/list', {
        params: {
          page: this.pageIndex,
          limit: this.pageSize,
          key: this.dataForm.key,
          productName: this.dataForm.productName,
          sessionId: this.dataForm.sessionId
        }
      }).then((data) => {
        if (data && data.data.code === 200) {
          this.dataList = data.data.page.list
          this.totalPage = data.data.page.totalCount
        } else {
          this.$message.error(data.data.msg)
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    createOrderHandle(id) {
      this.createOrderVisible = true
      this.$nextTick(() => {
        this.$refs.CreateOrder.init(id)
      })
    },
  }
}
</script>
